<!-- src/components/Calendar/YearViewCard.vue -->
<template>
  <div 
    v-if="visible" 
    class="year-view-card" 
    :style="{ left: position.x + 'px', top: position.y + 'px' }"
    ref="cardRef"
  >
    <!-- 顶部可拖动区域 -->
    <div class="card-header" @mousedown="startDrag">
      <span class="drag-handle">⋮⋮</span>
      <button class="close-btn" @click="close">×</button>
    </div>
    
    <!-- 星期显示 -->
    <div class="week-day">{{ weekDay }}</div>
    
    <!-- 日期按钮 -->
    <div class="date-section">
      <button class="date-btn" @click="goToDayView">{{ dateNumber }}</button>
    </div>
    
    <!-- 备注 -->
    <div class="remark">这一天没有安排活动</div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, onUnmounted, computed, nextTick } from 'vue'

interface Props {
  visible: boolean
  selectedDate: Date
  clickPosition: { x: number, y: number }
}

const props = defineProps<Props>()

const emit = defineEmits<{
  'close': []
  'go-to-day-view': [date: Date]
}>()

// 卡片位置
const position = reactive({ x: 0, y: 0 })
const cardRef = ref<HTMLElement>()
let isDragging = false
let dragOffset = { x: 0, y: 0 }

// 计算属性
const weekDay = computed(() => {
  const days = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
  return days[props.selectedDate.getDay()]
})

const dateNumber = computed(() => {
  return props.selectedDate.getDate()
})

// 计算卡片位置
const calculatePosition = () => {
  if (!cardRef.value) return
  
  const cardWidth = 200 // 卡片宽度
  const cardHeight = 180 // 卡片高度
  const margin = 10 // 边距
  
  let x = props.clickPosition.x - cardWidth - margin // 默认显示在左侧
  let y = props.clickPosition.y
  
  // 检查左侧空间是否足够
  if (x < margin) {
    // 左侧空间不足，显示在右侧
    x = props.clickPosition.x + margin
  }
  
  // 检查底部空间是否足够
  const windowHeight = window.innerHeight
  if (y + cardHeight > windowHeight - margin) {
    // 底部空间不足，向上调整
    y = windowHeight - cardHeight - margin
  }
  
  // 确保位置在可视区域内
  position.x = Math.max(margin, Math.min(x, window.innerWidth - cardWidth - margin))
  position.y = Math.max(margin, Math.min(y, window.innerHeight - cardHeight - margin))
}

// 开始拖动
const startDrag = (e: MouseEvent) => {
  isDragging = true
  const rect = cardRef.value!.getBoundingClientRect()
  dragOffset.x = e.clientX - rect.left
  dragOffset.y = e.clientY - rect.top
  
  document.addEventListener('mousemove', onDrag)
  document.addEventListener('mouseup', stopDrag)
}

// 拖动中
const onDrag = (e: MouseEvent) => {
  if (!isDragging) return
  position.x = e.clientX - dragOffset.x
  position.y = e.clientY - dragOffset.y
  
  // 确保拖动时不会超出窗口边界
  const cardWidth = 200
  const cardHeight = 180
  const margin = 10
  
  position.x = Math.max(margin, Math.min(position.x, window.innerWidth - cardWidth - margin))
  position.y = Math.max(margin, Math.min(position.y, window.innerHeight - cardHeight - margin))
}

// 停止拖动
const stopDrag = () => {
  isDragging = false
  document.removeEventListener('mousemove', onDrag)
  document.removeEventListener('mouseup', stopDrag)
}

// 关闭卡片
const close = () => {
  emit('close')
}

// 跳转到日视图
const goToDayView = () => {
  emit('go-to-day-view', props.selectedDate)
}

// 点击外部关闭
const handleClickOutside = (e: MouseEvent) => {
  if (cardRef.value && !cardRef.value.contains(e.target as Node)) {
    close()
  }
}

// 监听点击事件
onMounted(() => {
  document.addEventListener('click', handleClickOutside)
})

// 监听可见性变化，重新计算位置
import { watch } from 'vue'
watch(() => props.visible, (newVal) => {
  if (newVal) {
    nextTick(() => {
      calculatePosition()
    })
  }
})

onUnmounted(() => {
  document.removeEventListener('click', handleClickOutside)
  document.removeEventListener('mousemove', onDrag)
  document.removeEventListener('mouseup', stopDrag)
})
</script>

<style scoped>
.year-view-card {
  position: fixed;
  width: 200px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  border: 1px solid #e0e0e0;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: #f8f9fa;
  border-bottom: 1px solid #e0e0e0;
  border-radius: 8px 8px 0 0;
  cursor: move;
  user-select: none;
}

.drag-handle {
  color: #666;
  font-size: 16px;
  cursor: move;
}

.close-btn {
  background: none;
  border: none;
  font-size: 18px;
  color: #666;
  cursor: pointer;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-btn:hover {
  background: #e0e0e0;
}

.week-day {
  text-align: center;
  padding: 12px 0 8px;
  font-size: 14px;
  color: #666;
  font-weight: 500;
}

.date-section {
  text-align: center;
  padding: 8px 0 12px;
}

.date-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: #1976d2;
  color: white;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.date-btn:hover {
  background: #1565c0;
  transform: scale(1.05);
}

.remark {
  text-align: left;
  padding: 12px;
  font-size: 12px;
  color: #666;
  border-top: 1px solid #f0f0f0;
  margin: 0 8px;
}
</style>